<template>
  <div id="right" style="overflow-y:auto;">
    <div class="bigClass">
      总数据
      <span>(截止目前)</span>
    </div>
    <el-row :gutter="10" class="gmb">
      <el-col :span="6">
        <div class="box flex-row">
          <div class="icon-box">
            <div class="icon-title">建卡数量</div>
            <div class="icon-number">5426</div>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box flex-row">
          <div class="icon-box">
            <div class="icon-title">成人数量</div>
            <div class="icon-number">4380</div>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box flex-row">
          <div class="icon-box">
            <div class="icon-title">儿童数量</div>
            <div class="icon-number">1046</div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="box flex-row">
          <div class="icon-box">
            <div class="icon-title">男性</div>
            <div class="icon-number">3130</div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="box flex-row">
          <div class="icon-box">
            <div class="icon-title">女性</div>
            <div class="icon-number">2296</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="box gmb">
      <v-chart style="width:100%;height:300px;" :options="menzhen" autoresize />
    </div>
    <div class="box gmb">
      <v-chart style="width:100%;height:400px" :options="renqun" autoresize />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      men: 0,
      women: 0,
      menzhen: {
        title: {
          text: '门诊就诊人数',
          subtext: '按小时统计'
        },
        grid: {
          top: 60,
          left: 60,
          right: 20,
          bottom: 20
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              backgroundColor: '#000'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: [
            "00",
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10"
          ],
          axisLabel: {
            color: '#000',
            fontSize: 14
          },
          axisLine: { show: false },
          boundaryGap: false,
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: '#000'
            },
            axisTick: {       //y轴刻度线
              show: false
            },
            splitLine: {     //网格线
              show: false
            },
            axisLine: { show: false },
            interval: 0
          }
        ],
        series: {
          name: '挂号人数',
          symbol: 'path://M717.664 612.195c-52.734 47.461-121.289 79.102-200.391 79.102s-147.656-31.641-205.664-79.102c-131.836 68.555-221.484 158.203-221.484 321.68l843.75 0c0-163.477-89.648-247.852-216.211-321.68zM512 628.016c131.836 0 237.305-110.742 237.305-242.578s-105.469-242.578-237.305-242.578-237.305 110.742-237.305 242.578c0 137.109 110.742 242.578 237.305 242.578z"',
          symbolSize: [20, 20],
          symbolOffset: [0, '-100%'],
          type: 'line',
          smooth: true,
          lineStyle: {
            normal: {
              width: 2,
              color: "#47D8BE"
            }
          },
          label: {//默认文字显示
            show: true,
            position: 'top',
            textStyle: {
              color: '#41bba5',
              fontSize: 14
            },
            formatter: function (params) {
              return params.value + '人';
            }
          },
          itemStyle: {//默认图标颜色
            color: '#41bba5'
          },
          emphasis: {//选中后样式
            itemStyle: {
              color: '#c12e34'
            },
            label: {
              color: '#c12e34',
              fontSize: 16
            }
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#77e4d1'

              }, {
                offset: 1,
                color: '#daf1ed'
              }],
              globalCoord: false
            }
          },
          data: [
            7,
            8,
            4,
            6,
            4,
            23,
            49,
            547,
            1010,
            857,
            77
          ],
        }
      },
      renqun: {
        title: {
          text: '就诊人群分析'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        grid: {
          top: 60,
          left: 0,
          right: 20,
          bottom: 20,
          containLabel: true,

        },
        yAxis: {
          type: 'value',
          splitLine: {     //网格线
            show: false
          },
          axisLabel: {
            // formatter: function (value, index) {
            //   return value + '%';
            // },
            color: '#000',
            fontSize: 14
          },
          axisTick: {
            show: false,
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLabel: {
            // formatter: function (value, index) {
            //   return value + '%';
            // },
            color: '#000',
            fontSize: 14
          },
          data: [
            "0-10",
            "11-20",
            "21-30",
            "31-40",
            "41-50",
            "51-60",
            "61+"
          ]
        },
        series: {
          name: '年龄段',
          barMinWidth: 10,
          type: 'bar',
          itemStyle: {
            normal: {
              color: (params) => {
                let colors = ['#96dee8', '#3fb1e3', '#6be6c1', '#ffb248', '#fa5151', '#cb0a0a']
                return colors[params.dataIndex]
              },

            }
          },
          label: {//默认文字显示
            show: true,
            position: 'top',
            textStyle: {
              fontSize: 14
            },
            formatter: function (params) {
              return params.value + '人';
            }
          },
          data: [
            270,
            236,
            326,
            336,
            337,
            384,
            603
          ]
        }
      },
    };
  },
  mounted() {
    
  },
  methods: {
    
  },
  components: {},
  watch: {},
  props: {},
  computed: {},
  //组件销毁事件
  destroyed() { }
};
</script>
<style scoped>
ul,
li,
ol {
  list-style: none;
}
.flex-row {
  display: flex;
  flex-direction: row !important;
}
.flex {
  display: flex;
  flex-direction: column;
}
.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
.flex3 {
  flex: 3;
}
.flex4 {
  flex: 4;
}
.bigClass {
  font-size: 20px;
  margin-bottom: 10px;
}
.bigClass span {
  font-size: 14px;
  margin-left: 10px;
  color: #999;
}
.box {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;
  padding: 20px;
}
.icon-box {
  flex: 1;
  text-align: right;
}
.icon-title {
  height: 30px;
  line-height: 20px;
  font-size: 20px;
  color: #777;
}
.icon-number {
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  color: #000;
  overflow: hidden;
}
</style>